import {colorsClassesType} from './code/colors-classes-type';

const columns = [
  { title: 'prop', type: 'markdown' },
  { title: 'type', type: 'code' },
  { title: 'Description', type: 'markdown' },
]

const tableData = [
  ['colorsClasses', colorsClassesType, 'An array of `ColorsClassesConfig` type objects. Used to define new helper classes'],
]

export default definePageConfig({
  blocks: [
    block.title('Custom classes for the colors'),
    block.paragraph('By default, Vuestic UI creates custom classes for coloring the text and background colors of elements relative to the global color configuration. To expand the number of generated classes, you need to add the `colorsClasses` configuration to the `GlobalConfig`.'),
    block.paragraph('The values for `colorVariableName` and `colorValue` are taken from the global color config.'),
    block.paragraph('Read more about CSS Variables for colors generated by Vuestic UI by default [here](/services/colors-config).'),

    block.subtitle('Let\'s create our config'),
    block.paragraph('We need to update the colors classes configuration in the our global configuration. The colors classes are an array of objects with class names and CSS properties. For example:'),
    block.code('setup-example'),
    block.paragraph('The example above shows us the `ColorsClassesConfig` configuration structure. It\'s important to note that styleProperty can take either a string or an array of strings as its value.'),
    block.paragraph('An example of using the classes we created:'),
    block.example('Default'),

    block.subtitle('Helper classes configuration API'),
    block.table(columns, tableData),
  ],
})
